<template>
  <a-drawer v-model:open="open" :title="$t('bcrz')" width="50%">
    <a-descriptions bordered :column="1" :label-style="{ minWidth: '120px' }">
      <a-descriptions-item :label="$t('mc')">{{ currentLog.name }}</a-descriptions-item>
      <a-descriptions-item :label="$t('ymdz')">{{ currentLog.url }}</a-descriptions-item>
      <a-descriptions-item :label="$t('bcxx')">{{ currentLog.message }}</a-descriptions-item>
      <a-descriptions-item :label="$t('bclx')">{{ currentLog.type }}</a-descriptions-item>
      <a-descriptions-item :label="$t('bcsj')">{{ currentLog.time }}</a-descriptions-item>
      <a-descriptions-item :label="$t('bcwj')">{{ currentLog.file }}</a-descriptions-item>
      <a-descriptions-item :label="$t('dz')">{{ currentLog.stack }}</a-descriptions-item>
      <a-descriptions-item :label="$t('llqbs')">{{ currentLog.userAgent }}</a-descriptions-item>
      <a-descriptions-item :label="$t('xxxx')" span="3" :content-style="{ padding: 0 }">
        <highlightjs :code="currentLog.detail || ''"></highlightjs>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup>
  //@i18n-file-id: 4f562397ca8447c249db053a67f55b30
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
import { useNoticeStore } from '@/stores/modules/notice'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
const highlightjs = hljsVuePlugin.component
const open = ref(false)
const currentLog = ref({})
const { updateNotice } = useNoticeStore()
const title = t('bcjsxx')
const close = t('close')
const translat= function(msg){
  console.log(t('close'))
  console.log(msg)
}
translat('hello')
const openLog = (log) => {
  currentLog.value = log
  open.value = true
  updateNotice('error', log.id)
}
defineExpose({
  openLog
})
</script>
<style scoped>
:deep(.hljs) {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
